<template>
  <div class="student-id">
    <div class="login-title">
      <img src="@/assets/login/logo@2x.png" alt="" />
    </div>
    <div class="content">
      <span class="choose-title">请选择注册角色</span>
      <div class="choose-role">
        <div
          class="role-row"
          :class="item.checked ? 'active' : ''"
          v-for="(item, index) in roleList"
          :key="index"
          @click="chooseRole(index)"
        >
          <img
            :src="item.checked ? item.selectSrc : item.src"
            alt=""
            :class="item.checked ? 'active-img' : ''"
          />
          <span>{{ item.role }}</span>
          <span>{{ item.title }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      roleList: [
        {
          src: require("../../assets/login/teacher-1.png"),
          selectSrc: require("../../assets/login/teacher-2.png"),
          role: "我是老师",
          title: "Teacher",
          checked: false,
        },
        {
          src: require("../../assets/login/student-1.png"),
          selectSrc: require("../../assets/login/student-2.png"),
          role: "我是学生",
          title: "Student",
          checked: true,
        },
        {
          src: require("../../assets/login/social-1.png"),
          selectSrc: require("../../assets/login/social-2.png"),
          role: "社会人员",
          title: "Society",
          checked: false,
        },
      ],
    };
  },
  methods: {
    chooseRole(index) {
      if (!this.roleList[index].checked) {
        this.roleList.forEach((item) => {
          item.checked = false;
        });
        this.roleList[index].checked = true;
      }else{
        if(this.roleList[index].title === 'Society'){
          this.$emit('chooseRole',{'num':4,'role':this.roleList[index].title})
        }else{
          this.$emit('chooseRole',{'num':3,'role':this.roleList[index].title})
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.student-id {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: url("../../assets/login/beij@2x.png") no-repeat;
  background-size: cover;
  .login-title {
    background-color: none;
    margin-top: calc(37 / 1920 * 100vw);
    margin-left: calc(77 / 1920 * 100vw);
    > img {
      width: calc(390 / 1920 * 100vw);
      height: calc(40 / 1920 * 100vw);
    }
  }
  .content {
    margin: calc(100 / 1920 * 100vw) auto 0;
    // position: absolute;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%,-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    .choose-title {
      font-size: calc(36 / 1920 * 100vw);
      font-weight: bold;
      color: #fff;
    }
    .choose-role {
      display: flex;
      align-items: center;
      margin-top: calc(88 / 1920 * 100vw);
      .role-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: calc(10 / 1920 * 100vw);
        background: rgba(255, 255, 255, 0.2);
        width: calc(408 / 1920 * 100vw);
        height: calc(268 / 1920 * 100vw);
        cursor: pointer;
        > img {
          width: calc(108 / 1920 * 100vw);
          height: calc(108 / 1920 * 100vw);
          margin-top: calc(40 / 1920 * 100vw);
        }
        .active-img {
          width: calc(132 / 1920 * 100vw);
          height: calc(153 / 1920 * 100vw);
          margin-top: calc(58 / 1920 * 100vw);
        }
        > span:first-of-type {
          font-size: calc(28 / 1920 * 100vw);
          color: #fff;
          margin-top: calc(24 / 1920 * 100vw);
        }
        > span:last-of-type {
          font-size: calc(20 / 1920 * 100vw);
          color: #fff;
        }
      }
      .role-row:nth-of-type(2) {
        margin: 0 calc(88 / 1920 * 100vw);
      }
      .active {
        width: calc(502 / 1920 * 100vw);
        height: calc(350 / 1920 * 100vw);
        background: rgba(253, 81, 81, 0.2);
        > span:first-of-type {
          font-size: calc(28 / 1920 * 100vw);
          color: rgba(253, 81, 81, 1);
          margin-top: calc(24 / 1920 * 100vw);
        }
        > span:last-of-type {
          font-size: calc(20 / 1920 * 100vw);
          color: rgba(253, 81, 81, 1);
        }
      }
    }
  }
}
</style>